<template>
	<view class="content">
		<view class="pageHeader">
			个人信息
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
			 <button  @tap="saveUserInfo()" class="save">保存</button>
		</view>
		<view class="regoodbox">
			<view class="flex aic fsb" style="padding: 20upx 0;font-size: 28upx;color: #333;border-bottom: 2upx solid #EFEFEF;">
				<text style="padding-left: 20upx;">头像</text>
				<image :src="myinfo.avatar" style="width: 80upx;height: 80upx;border-radius: 50%;"></image>
			</view>	
			<view class="flex aic fsb" style="padding: 20upx 0;font-size: 28upx;color: #333;border-bottom: 2upx solid #EFEFEF;">
				<text style="padding-left: 20upx;">用户名</text>
				<text class="modeinp">{{myinfo.username}}</text>
				
			</view>	
			<view class="flex aic fsb" style="padding: 20upx 0;font-size: 28upx;color: #333;border-bottom: 2upx solid #EFEFEF;">
				<text style="padding-left: 20upx;">昵称</text>
				<input type="text" placeholder="请输入昵称"  v-model="myinfo.nickname"   class="modeinp"/>
			</view>	
			<view class="flex aic fsb" style="padding: 20upx 0;font-size: 28upx;color: #333;border-bottom: 2upx solid #EFEFEF;">
				<text style="padding-left: 20upx;">性别</text>
				<view>
					<picker @change="carbindPickerChange" :value="sexindex" :range="sexchoose">
					     <view class="uni-input">{{sexchoose[sexindex]}}</view>
					</picker>
				</view>
			</view>	
		</view>
	</view>
	</template>
	<script>
	import postAjax from '../../../API/postAjax.js'
	export default {
		data() {
			return {
				userToken:'',// token
				userInfo:{},
				sexchoose:['保密','女','男'],
				sexindex:0,
				sexname:'',
				myinfo:{}
			}
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.myinfo = uni.getStorageSync('userinfo')
					
			that.sexindex=that.myinfo['gender']
			
		},
		methods: {
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},	
			// 获取个人信息
			getUserInfo(){
				let that = this
				postAjax('user/Center',{token:that.userToken},function(data){
					console.log(data)
					if(data.code){
						that.myinfo = data.data
					}else{
						that.getUserInfo()
					}
					
				})
			},
			carbindPickerChange:function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.sexindex = e.target.value
			},
			
			saveUserInfo:function(){
				let that = this
				
				console.log(that.sexindex)
				postAjax('user/PersonalSave',{
					token:that.userToken,
					nickname:that.myinfo.nickname,
					gender:that.sexindex,
					birthday:'',
					
					},function(data){
									
						if(data.code==0){
							that.myinfo.gender=that.sexindex							
							uni.setStorageSync('userinfo',that.myinfo)
							
							uni.showToast({
							  title:'修改成功',
							  icon:'none'
							})							

						}else{
							uni.showToast({
							  title:'修改失败',
							  icon:'none'
							})	
						}
				})
			}
		}
	}
	
</script>

<style>
	.content{min-height: 100vh;background-color: #F9F9F9;}
	.pageHeader{width: 100%;height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.save{display: inline-block;font-size: 28upx;width:120upx;padding: 0;background:none;color: #fff;position: absolute;top:70upx;right:30upx}
	.save::after{border: none;}
	.regoodbox{padding:0 30upx;}
	.modeinp{text-align: right;}
</style>
